<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-gradual-blue">
			<block slot="content">{{title==''?'实景展示':title}}</block>
		</cu-custom>		
        <canvas
			class='scene' id='scene' canvas-id="scene"  type="webgl"
			:style="'width:'+mSceneWidth+'px; height:'+mSceneHeight+'px;'" 
			@touchstart="touchStart" 
			@touchmove="touchMove" 
			@touchend="touchEnd"
			>			
		</canvas>		
		<!-- VR选择 begin -->
		<view class="cu-card case">
			<!-- 文章简介 begin -->
			<view class="cu-item shadow">				
				<view class="padding-sm padding-bottom-xs text-bold">{{name}} VR全景</view>					
				<!-- 文章列表 begin -->
				<view class="margin-lr-xs solid-bottom padding-bottom-sm">
					<scroll-view style='white-space: nowrap;' scroll-x="true" class="flex">
						<view style="display: inline-block;" v-for="(item,index) in vrList" :key="index">
							<view :style="'background-image:url('+item.img+');'+(index==now?'border:1px solid #aaa':'')" class="flex padding-xs flex-direction align-start justify-end cu-avatar radius margin-xs xl img-radius" @tap="goVr(index)">
								<view class="text-cut text-bold text-xs" style="width: 100%;">{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 文章列表 end -->
			</view>				
			<!-- 文章简介 end -->
		</view>
		<!-- VR选择 end -->
		
    </view>
</template>
<script>
	// 导入 threejs
	import * as THREE from '../../libs/three.weapp.js'
	import {all_init,clear_canvas,touchStart,touchMove,touchEnd} from './fun.js'
    
    export default {
        data() {
            return {
				vrList:[],
				now:0,
				name:'',
				title:'',
                mSceneWidth: 0, // 手机屏幕宽度
                mSceneHeight: 0, // 手机屏幕高度
                worldFocus: null, // 世界焦点（模型放置，相机围绕的中心）

                mCanvas:null,
				mCanvasId: null,
                mSence: null,
                mCamera: null,
                
				renderAnimFrameId: null, // 渲染帧动画id
				
				bottom_pic_url:'',//底部圆台纹理链接
				panorama_url:''//全景图片链接

            };
        },
        // 页面加载时
        onLoad(option){
            // 获取手机屏幕宽高
            this.mSceneWidth = uni.getWindowInfo().windowWidth;
            this.mSceneHeight = this.mSceneWidth;
            // 设置世界中心
            this.worldFocus = new THREE.Vector3(0, 0, 0);
			
			let data = JSON.parse(decodeURIComponent(option.data));
			
			this.vrList=data.vr
			
			this.title=this.vrList[0].title
			this.name=data.name
			
			this.bottom_pic_url='https://smart1st.online/admin/202501/2025011612075100050108.png'
			
			this.panorama_url=this.vrList[0].vr
        },
        // 页面加载完毕后
        onReady(){
            // 获取 canvas 元素, 初始化 Three
            uni.createSelectorQuery().select('#scene').node().exec((res) => {
                // 获取 canvasId
                this.mCanvasId = res[0].node._canvasId;
                // 注册画布
                const mCanvas = THREE.global.registerCanvas(this.mCanvasId, res[0].node);
				this.mCanvas=mCanvas
                // 开始初始化
                //this.init(mCanvas);
				all_init(mCanvas,this)
            });
		},
        // 页面卸载时
        onUnload() {
        	clear_canvas(this)
        },
        methods: {
            touchStart,
            touchMove,
            touchEnd,
			goVr:function(index){
				this.panorama_url=this.vrList[index].vr
				this.title=this.vrList[index].title
				this.now=index
				clear_canvas(this)
				all_init(this.mCanvas,this)
			}
        }
    }
</script>

<style scoped>
	.img-radius{
		width: 210rpx !important;
		border-radius:5%!important;
		border:1px solid #efefef;
		background-size:cover!important;
	}
</style>
